<template>
  <div class="layout">
    <el-container>
      <el-aside hide-trigger width="300" :style="{background: '#fff'}">
        <div style="padding-left: 10px;">
          <div>
            <el-row style="padding-top:10px">
              <el-col :span="6" style="padding-right:10px">
                <el-button v-has="30801" type="primary" @click="add">新增角色</el-button>
              </el-col>
            </el-row>

          </div>
          <el-divider />
          <div ref="cellGroup">
            <el-card class="box-card">
              <div v-for="(item,index) in roles" :key="item.id" :selected="item.checked" class="clearfix" style="padding-top: 10px;">
                <span style="cursor: pointer;" @click="cellClick(index)">{{ item.name }}</span>
                <el-button v-if="show(item)" v-has="30802" type="text" shape="circle" size="small" @click="del(item)">删除</el-button>
              </div>
            </el-card>
          </div>
        </div>
      </el-aside>
      <el-main :style="{padding: '24px', minHeight: '280px'}">
        <el-tree ref="tree" :data="menus" node-key="id" default-expand-all show-checkbox />
        <el-button v-has="30803" type="primary" @click="editSubmit">确定</el-button>
      </el-main>
    </el-container>
    <div>
      <el-dialog :visible.sync="openDrawer" :title="drawerTitle" top="0" width="60%">
        <el-form :model="formData">
          <el-row :gutter="32">
            <el-col :span="12">
              <el-form-item label="角色名称" label-position="top">
                <el-input v-model="formData.roleName" placeholder="角色名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-tree ref="treeAdd" :data="menus" node-key="id" default-expand-all show-checkbox check-directly @on-check-change="treeCheckChange" />
        <div slot="footer" class="dialog-footer">
          <el-button style="margin-right: 8px" @click="closeDrawer">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      openDrawer: false,
      menus: [],
      menuMap: new Map(),
      roles: [],
      // 新增页面打开前已经选择的node,为了等Drawer关闭后恢复checked状态
      menuCheckedNodesBeforeOpenDrawer: [],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formDataDefault: {
        roleName: ''
      },
      formData: {
        roleName: ''
      },
      updateFormData: {
        id: 0
      },
      drawerTitle: '新增'
    }
  },
  computed: {
  },
  created() {
    this.loadMenus()
    this.list()
  },
  mounted() {
  },
  methods: {
    list() {
      request({
        url: 'role/list',
        method: 'get'
      }).then(res => {
        if (res.success) {
          res.data.forEach(ele => {
            ele.checked = false
          })
          this.roles = res.data
        }
      })
    },
    loadMenus() {
      request({
        url: 'role/menus',
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.menus = res.data
          this.menus.forEach(ele => {
            this.menuMapSet(ele)
          })
        }
      })
    },
    menuMapSet(node) {
      this.menuMap.set(node.id, node)
      if (node.children) {
        node.children.forEach(el => {
          this.menuMapSet(el)
        })
      }
    },
    show(item) {
      return item.name !== '客服' && item.name !== '业务员'
    },
    submit() {
      const checkedIds = this.$refs.treeAdd.getCheckedKeys()
      this.formData.menuIds = checkedIds
      request({
        url: 'role/add',
        method: 'post',
        data: this.formData
      }).then(res => {
        if (res.success) {
          this.openDrawer = false
          this.list()
          this.recoverTreeChecked()
        }
      })
    },
    editSubmit() {
      const checkedNotes = this.$refs.tree.getCheckedNodes(false, true)
      const checkedIds = []
      checkedNotes.forEach(element => {
        checkedIds.push(element.id)
      })
      this.updateFormData.menuIds = checkedIds
      request({
        url: 'role/update-role-menus',
        method: 'post',
        data: this.updateFormData
      }).then(res => {
        if (res.success) {
          this.list()
          this.$message.success('成功')
        }
      })
    },
    add() {
      this.clearTreeChecked()
      for (const x in this.formData) {
        this.formData[x] = this.formDataDefault[x]
      }
      this.openDrawer = true
    },
    cellClick(index) {
      this.updateFormData.id = this.roles[index].id
      this.$refs.tree.setCheckedKeys([])
      const menus = this.roles[index].menus
      if (!menus) {
        return
      }

      const ids = JSON.parse(menus)
      const roleIds = []
      ids.forEach(ele => {
        if (ele > 99) {
          roleIds.push(ele)
        }
      })
      this.$refs.tree.setCheckedKeys(roleIds)
    },
    closeDrawer() {
      this.recoverTreeChecked()
      this.openDrawer = false
    },
    clearTreeChecked() {
      const checkedNotes = this.$refs.tree.getCheckedNodes()
      this.menuCheckedNodesBeforeOpenDrawer = checkedNotes
      for (const node of checkedNotes) {
        node.checked = false
      }
    },
    recoverTreeChecked() {
      for (const node of this.menuCheckedNodesBeforeOpenDrawer) {
        node.checked = true
      }
    },
    treeCheckChange(all, node) {
      this.menuCheckedAdd = all
    },
    del(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         request({
          url: 'role/delete?roleId=' + row.id,
          method: 'GET'
        }).then(res => {
          if (res.success) {
            this.list()
          }
        })
      })
    }
  }
}
</script>
